<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item label="合同信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-search-select-tag :async="true"  v-decorator="['leaseContractId', validatorRules.leaseContractId]"
                               :disabled="disableSubmit"
                               dict="zcgl_lease_contract_info,contract_num,id" @change="changeLease"/>
        </a-form-item>
        <a-form-item v-if="!isReadOnly" label="资产信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-search-select-tag  :async="true" v-decorator="['assetId', validatorRules.assetId]"
                               :disabled="disableSubmit"
                               @change="selectSub"
                               dict="zcgl_asset_info,asset_name,id"/>
        </a-form-item>

        <a-form-item v-if="!isReadOnly" label="资产明细" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-search-select-tag
            :trigger-change="true"
            v-decorator="['assetSubIds', validatorRules.assetSubIds]"
            :dictOptions="searchOptions"
            :disabled="disableSubmit || isReadOnly"
            placeholder="请选择资产明细"/>
        </a-form-item>

        <a-form-item v-if="!isReadOnly" label="客户信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-search-select-tag :async="true"  v-decorator="['customerId', validatorRules.customerId]"
                               :disabled="disableSubmit || isReadOnly"
                               dict="zcgl_customer_info,name,id"/>
        </a-form-item>

        <a-form-item v-if="!isReadOnly" label="出租方（入账公司）" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-company-select-tag placeholder="请选择出租方（入账公司）" :disabled="disableSubmit || isReadOnly" v-decorator="[ 'rentCompanyId', validatorRules.rentCompanyId]" :trigger-change="true"/>
        </a-form-item>

        <a-form-item label="款项说明" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag type="list" v-decorator="['paymentInstructions', validatorRules.paymentInstructions]" :disabled="disableSubmit"
                             :trigger-change="true" dictCode="payment_instructions" placeholder="请选择款项说明"></j-dict-select-tag>
        </a-form-item>
        <a-form-item label="收款金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number v-decorator="['amountMoney', validatorRules.amountMoney]" :disabled="disableSubmit"
                          placeholder="请输入收款金额" style="width: 100%"/>
        </a-form-item>
        <a-form-item label="支付状态" v-show="disableSubmit" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag type="list" v-decorator="['payStatus', validatorRules.payStatus]" :disabled="disableSubmit"
                             :trigger-change="true" dictCode="pay_status" placeholder="请选择支付状态"/>
        </a-form-item>
        <a-form-item label="支付方式" v-show="disableSubmit" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag type="list" v-decorator="['payType', validatorRules.payType]" :disabled="disableSubmit"
                             :trigger-change="true" dictCode="pay_type" placeholder="请选择支付方式"/>
        </a-form-item>
        <a-form-item label="开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-date placeholder="请选择开始日期" v-decorator="['startTime', validatorRules.startTime]" :disabled="disableSubmit"
                  :trigger-change="true" style="width: 100%"/>
        </a-form-item>
        <a-form-item label="结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-date placeholder="请选择结束日期" v-decorator="['endTime', validatorRules.endTime]" :disabled="disableSubmit"
                  :trigger-change="true" style="width: 100%"/>
        </a-form-item>

        <a-form-item label="收款日期" v-show="disableSubmit" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-date placeholder="请选择收款日期" v-decorator="['receiptDate']" :trigger-change="true" :disabled="disableSubmit"
                  style="width: 100%"/>
        </a-form-item>

        <a-form-item label="收款人" v-show="disableSubmit" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-search-select-tag :async="true"  v-decorator="['payeeBy']" :disabled="disableSubmit" dict="sys_user,realname,id"
                               placeholder="请选择收款人"/>
        </a-form-item>

        <a-form-item v-show="disableSubmit" label="付款人" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-model="model.paymentBy_dictText" :disabled="disableSubmit" />
        </a-form-item>

        <a-form-item label="所属公司" v-is-group :labelCol="labelCol" :wrapperCol="wrapperCol">

          <j-company-select-tag placeholder="请选择所属公司" v-decorator="[ 'companyId', validatorRules.companyId]" :disabled="disableSubmit" :trigger-change="true"/>
        </a-form-item>

        <a-form-item label="收款说明" v-show="disableSubmit" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
          <a-textarea v-decorator="['payeeRemark']" rows="4" :disabled="disableSubmit" placeholder="请输入收款说明"/>
        </a-form-item>

        <a-form-item label="收款明细" v-show="disableSubmit" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
          <a-textarea v-decorator="['payeeDetails']" rows="4" :disabled="disableSubmit" />
        </a-form-item>

        <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
          <a-textarea v-decorator="['remark']" rows="4" :disabled="disableSubmit" placeholder="请输入备注"/>
        </a-form-item>

      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>

  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import JDate from '@/components/jeecg/JDate'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
  import { AssetSubMixin } from '@/api/assetSubMixin'
  import JCompanySelectTag from '@comp/jeecg/JCompanySelectTag'
  import { ACCESS_TOKEN, IS_GROUP } from '@/store/mutation-types'

  export default {
    name: 'ReceivablesInfoModal',
    mixins: [AssetSubMixin],
    components: {
      JDate,
      JDictSelectTag,
      JCompanySelectTag,
      JSearchSelectTag
    },
    data () {
      return {
        form: this.$form.createForm(this),
        title: '操作',
        width: 800,
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        isReadOnly: false,
        disableSubmit: false,
        validatorRules: {
          leaseContractId: {
            rules: [
              { required: true, message: '请输入合同信息!' }
            ]
          },
          assetId: {
            rules: [
              { required: false, message: '请输入资产信息!' }
            ]
          },
          rentCompanyId: {
            rules: [
              { required: true, message: '请选择出租方（入账公司）!' }
            ]
          },
          assetSubIds: {
            rules: [
              { required: false, message: '请输入资产明细!' }
              // { validator: this.validateCode }
            ]
          },
          customerId: {
            rules: [
              { required: true, message: '请输入客户信息!' }
            ]
          },
          paymentInstructions: {
            rules: [
              { required: true, message: '请选择款项说明!' }
            ]
          },
          amountMoney: {
            rules: [
              { required: true, message: '请输入收款金额!' }
            ]
          },
          // payStatus: {
          //   rules: [
          //     { required: true, message: '请输入支付状态!' }
          //   ]
          // },
          payType: {
            rules: [
              { required: false, message: '请输入支付方式!' }
            ]
          },
          startTime: {
            rules: [
              { required: true, message: '请输入开始日期!' }
            ]
          },
          endTime: {
            rules: [
              { required: true, message: '请输入结束日期!' }
            ]
          }
        },
        url: {
          add: '/zcgl/receivablesInfo/add',
          edit: '/zcgl/receivablesInfo/edit'
        }
      }
    },
    methods: {
      add () {
        this.edit({})
      },
      edit (record) {
        let isGroup = sessionStorage.getItem(IS_GROUP)
        if (isGroup == 1) {
          let companyName = {
            rules: [{
              required: true, message: '请选择所属公司!'
            }]
          }
          this.validatorRules.companyId = companyName
        }
        this.form.resetFields()
        this.model = Object.assign({}, record)
        console.log(this.model)
        this.selectSub1(this.model.assetId, this.model.assetSubIds)
        this.visible = true
        if (this.model.leaseContractId) {
          this.isReadOnly = true
        } else {
          this.isReadOnly = false
        }
        this.$nextTick(() => {
          let keys = Object.keys(this.form.formItems);
          this.form.setFieldsValue(pick(this.model, keys))
        })
      },
      close () {
        this.$emit('close')
        this.visible = false
      },
      handleOk () {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            let formData = Object.assign(this.model, values)
            console.log('表单提交数据', formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                that.close()
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
            })
          }

        })
      },
      handleCancel () {
        this.close()
      },
      popupCallback (row) {
        let keys = Object.keys(this.form.formItems);
        this.form.setFieldsValue(pick(row, keys))
      }

    }
  }
</script>